<dom-module id="templategoods2-category-list-vertical">
    <template>
        <style>
            :host{
                display: block;
                width: 100%;
                
            }
            iron-image{
                display: block;
            }
            h3{
                margin: 0px;
                padding: 0px;
                font-size: 18px;
            }
            .category{
                margin-bottom: 10px;
                position: relative;
            }
            .category:last-of-type{
                margin-bottom: 0px;
            }
            .category .action{
                position: absolute;
                bottom: 0px;
                display: flex;
                justify-content:space-between;
                align-items:center;
                background-color: rgba(255,255,255,0.75);
                padding: 10px;
                width: 100%;
                color: #444;
                box-sizing: border-box;
            }
            paper-button{
                --paper-button-ink-color: #000;
                margin: 0px;
                font-size: 14px;
                color: #000;
                border: #666 solid 1px;
                border-radius: 0;
            }
            paper-button iron-icon{height: 20px;}
        </style>
        <iron-media-query query="max-width:750px" query-matches="{{smallScreen}}"></iron-media-query>
        <iron-ajax auto url="{{context.httpHost}}/plugin/api/product.category.list?app_id={{context.appId}}" last-response="{{categories}}"></iron-ajax>
        <template is="dom-repeat" items="{{categories.result}}" as="category">
            <div class="category">
                <a href="{{context.rootPath}}product/{{category.id}}">
                    <template is="dom-if" if="{{smallScreen}}">
                        <iron-image sizing="cover" preload fade style="width:100%;height:{{_getCoverHeight()}}px" src="{{category.pic}}?imageView2/1/w/800/h/450"></iron-image>
                    </template>
                    <template is="dom-if" if="{{!smallScreen}}">
                        <iron-image sizing="cover" preload fade style="width:100%;height:{{_getCoverHeight()}}px" src="{{category.pic}}?imageView2/1/w/1920/h/1080"></iron-image>
                    </template>
                </a>
                <div class="action" href="{{context.rootPath}}product/{{category.id}}">
                    <h3>{{category.name}}</h3>
                    <a href="{{context.rootPath}}product/{{category.id}}">
                        <paper-button><iron-icon icon="shopping-cart"></iron-icon>立即选购</paper-button>
                    </a>
                </div>
            </div>
        </template>
    </template>
    <script>
        class TemplateGoods2CategoryListVertical extends Polymer.Element{
            static get is(){
                return "templategoods2-category-list-vertical";
            }
            static get properties(){
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    }
                }
            }
            ready(){
                super.ready();
            }
            _getCoverHeight(){
                return this.offsetWidth/1.3333;
            }
            _visibleChanged(visible){
                
            }
        }
        customElements.define(TemplateGoods2CategoryListVertical.is, TemplateGoods2CategoryListVertical);
    </script>
</dom-module>

<dom-module id="templategoods2-blog-category-list-vertical">
    <template>
        <style>
            :host{
                display: block;
                width: 100%;
            }
            .categories{
                display: flex;
                flex-direction: column;
                padding:var(--blog-category-padding,15px);
            }
            a{
                display: block;
                width: 100%;
                padding:var(--blog-category-list-padding,15px 10px);
                font-size: 14px;
                border-bottom: #eee solid 1px;
                display: flex;
                justify-content:space-between;
                align-items: center;
                color: #444;
                text-decoration: none;
                box-sizing: border-box;
            }
            a svg{
                width: 16px;
                height: 16px;
                fill:#666;
            }
        </style>
        <iron-media-query query="max-width:750px" query-matches="{{smallScreen}}"></iron-media-query>
        <iron-ajax auto url="{{context.httpHost}}/plugin/api/blog.category.list?app_id={{context.appId}}" last-response="{{categories}}"></iron-ajax>
        <div class="categories">
            <template is="dom-repeat" items="{{categories.result}}" as="category">
                <a href="{{context.rootPath}}blog/{{category.id}}">
                    {{category.title}}({{category.blog_count}})
                    <svg viewBox="0 0 24 24"><g><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" class="style-scope iron-icon"></path></g></svg>
                </a>
            </template>
        </div>
    </template>
    <script>
        class TemplateGoods2BlogCategoryListVertical extends Polymer.Element{
            static get is(){
                return "templategoods2-blog-category-list-vertical";
            }
        }
        customElements.define(TemplateGoods2BlogCategoryListVertical.is, TemplateGoods2BlogCategoryListVertical);
    </script>
</dom-module>